import React, { Component } from 'react'
import Add from './add'
import List from './list'
import Home from './home'
import { BrowserRouter as Router,Switch, Route, NavLink,Redirect, Link } from 'react-router-dom'
import './app.css'
// imrd
class Myapp extends Component {
  render() {
    return (
      // <Router>
      <div>
        <NavLink to='/'  >首页 </NavLink> &nbsp;&nbsp;
        {/* activeClassName 激活,或者是点击状态下的类名,是添加,activeStyle 点击或者是激活状态下的object */}
        <NavLink to='/add' activeClassName='red' activeStyle={{backgroundColor:'yellow'}}   className='green' style={{backgroundColor:'pink'}}  >add</NavLink>  &nbsp;&nbsp;
        <NavLink to='/list' activeClassName='red' className='green'  >list</NavLink>  &nbsp;&nbsp;
        <Switch>
        {/* exact 精确匹配 ,如果传递参数则需要去掉,主要是和首页连用 */}
          <Route path='/' exact component={Home}></Route>
          <Route path='/add' exact  component={Add}></Route>
          <Route path='/list'  exact component={List}></Route>
          {/* 如果前边的路径都没有匹配上,则返回404页面  */}
          <Route path='*'  component={Error} ></Route>
          {/* Switch 只是匹配第一个遇见的url,其他的不匹配 */}
        </Switch>
      </div>
      // </Router>
    )
  }
}
export default Myapp
